<template>
    <fieldset>
        <legend>父组件</legend>
        <h1>父组件</h1>
        <childCom  ref="childRef" :gift="gift"
         @betMoney="handleBet"></childCom>
        <h1> {{gift}}</h1>
        <h2>下注金额：{{money}}</h2>
        <h2>{{balance}}</h2>
        <button @click="handleClick">点击修改gift</button>
    </fieldset>
</template>
<script setup>
import childCom from "./child.vue"
// 何时使用响应式api？一个核心，就是这个变量需不需要放到模板中使用

// ref是包装的概念

// 模板中使用ref会自动解包

import {ref,onMounted} from "vue"

let gift = ref('初始值')

let handleClick = () =>{
    gift.value = '阿根廷'
}

// 下注金额
let money = ref(0)

let handleBet = function(input){
    console.log(input);
    money.value = input
}

// ref引用组件

let childRef = ref(null)
// console.log(childRef);

// let {balance} = childRef.value

let balance = ref()

onMounted(()=>{
    balance.value = childRef.value.balance
    // console.log( childRef.value.balance);
   
})
</script>